<!--
 * @LastEditTime : 2022-11-03 15:00:17
 * @FilePath     : /pyy/src/views/chemistry/add/components/detailed.vue
 * @Description  : 化学分析 > 化学分析检测 > 明细表
-->

<template>
  <div class="detailed">
    <div class="header">检测信息{{ index + 1 }}</div>
    <div class="contanier">
      <van-field
        class="mandatory"
        autosize
        rows="1"
        type="textarea"
        name="sampleName"
        label="试样名称"
        label-width="max-content"
        :rules="[{ required: true, message: '不能为空' }]"
        placeholder="请填写"
        autocomplete="off"
        v-model="form.sampleName"
      />
      <van-field
        v-model="form.sampleCode"
        name="sampleCode"
        label="客户试样编号"
        placeholder="请填写"
        autocomplete="off"
      />
      <popup-select
        v-model="form.sampleState"
        name="sampleState"
        label="试样状态"
        placeholder="请选择"
        :options="sampleState"
        :default-props="{
          label: 'name',
          value: 'id',
        }"
      />
      <van-field
        v-model="form.specification"
        name="specification"
        label="试样规格"
        label-width="max-content"
        placeholder="请填写"
        autocomplete="off"
      />
      <popup-select
      class="mandatory"
        v-model="form.detectionBig"
        name="detectionBig"
        label="检测项目大类"
        :rules="[{ required: true, message: '不能为空' }]"
        placeholder="请选择"
        :options="detectionBig"
        :default-props="{
          label: 'name',
          value: 'id',
        }"
      />
      <van-field name="samplePreparation " label="明细表是否制样" >
        <template #input>
          <van-radio-group
            direction="horizontal"
            v-model="form.samplePreparation"
            disabled
          >
            <van-row type="flex" justify="space-between">
              <van-col v-for="item in whetherOptions" :key="item.id">
                <radio-circle :name="item.id" icon-size="16px">
                  {{ item.name }}
                </radio-circle>
              </van-col>
            </van-row>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        autosize
        rows="1"
        type="textarea"
        name="content"
        label="检测内容"
        label-width="max-content"
        placeholder="请选择"
        v-model="form.content"
        @click="showElement"
      />
<!--      <van-field
        type="number"
        name="cost"
        label="检测费"
        readonly
        placeholder="请填写数字"
        autocomplete="off"
        :value="form.cost || null"
      />-->
      <!-- <van-field
        v-model="form.costSamplePreparation"
        name="costSamplePreparation"
        label="检验费是否含制样"
        placeholder="请填写"
        autocomplete="off"
      /> -->
      <van-field
        autosize
        rows="1"
        type="textarea"
        name="remark"
        label="备注"
        label-width="max-content"
        placeholder="请填写"
        autocomplete="off"
        v-model="form.remark"
      />
    </div>
    <div class="footer addCopy" >
      <van-button
        class="btn-delete"
        inline-block
        type="default"
        icon="delete-o"
        
        @click="handleDelete"
      >
        删除
      </van-button>
      <van-button
        inline-block
          type="default"
          class="btn-add-detailed"
          icon="description"
          native-type="button"
          @click="handleAddCopy"
        >
          复制
        </van-button>
    </div>
    <!-- <div class="footer">
      <van-button
        class="btn-delete"
        block
        type="default"
        icon="delete-o"
        v-if="showDelete"
        @click="handleDelete"
      >
        删除
      </van-button>
    </div> -->

    <detailed-element
      ref="detailedElement"
      :detection-big-id="form.detectionBig"
      @confirm="handleDetailedConfirm"
    />
  </div>
</template>

<script>
import DetailedElement from "./detailed_element.vue";
import { Toast } from "vant";

export default {
  name: "Detailed",
  components: {
    DetailedElement,
  },
  props: {
    // 第几组
    index: {
      type: Number,
      require: true,
      default: 0,
    },
    // 是否显示 删除按钮
    showDelete: {
      type: Boolean,
      require: true,
      default: false,
    },
    // 试样状态
    sampleState: {
      type: Array,
      require: true,
      default: () => [],
    },
    // 检测项目大类
    detectionBig: {
      type: Array,
      require: true,
      default: () => [],
    },
    // 表单录入数据
    form: {
      require: true,
      type: Object,
      default: () => ({
        sampleName: "",
        sampleCode: "",
        sampleState: "",
        specification: "",
        detectionBig: "",
        samplePreparation: "",
        content: "",
        cost: null,
        costSamplePreparation: "",
        remark: "",
      }),
    },
  },
  data() {
    return {
      // 明细表是否制样
      whetherOptions: [
        {
          id: "1",
          name: "是",
        },
        {
          id: "0",
          name: "否",
        },
      ],
    };
  },
  mounted() {
    this.form.samplePreparation = this.whetherOptions[1].id;

  },
  methods: {
    /**
     * 点击 删除
     */
    handleDelete() {
      this.$emit("delete", this.index);
    },
    /**
     * 点击 复制当前
     */
     handleAddCopy() {
      this.$emit("copy", this.index);
    },
    /**
     * 显示 化学元素选择
     */
    showElement() {
      if (this.isNull(this.form.detectionBig)) {
        Toast.fail("请选择检测项目大类");
        return;
      }
      this.$refs.detailedElement.show();
    },

    /**
     * 化学元素 选择弹窗, 点击确定
     * @param {{key:['元素']}} selectElement: 选中的化学元素配置
     * @param {number} allPrice: 总价格
     */
    handleDetailedConfirm(selectElement, allPrice) {
      console.log("handleDetailedConfirm", selectElement, allPrice);
      this.form.content = Object.values(selectElement).flat(Infinity).join(",");
      this.form.cost = allPrice;
    },

    /**
     * 是否为空
     * @param {any} value: 需要进行验证的数据
     * @return {boolean}
     */
    isNull(value) {
      return [null, undefined, ""].includes(value);
    },
  },
  computed:{
        // 是否同意检验要求
        isRequire() {
      const result = this.whetherOptions.find(
        (item) => item.id ==  this.form.samplePreparation
      );
      return result ? result.name == "是" : false;
    },
  }
};
</script>

<style lang="less" scoped>
  .addCopy{
  display: flex;
    justify-content: space-evenly;
    background-color: #fff;
}
.detailed {
  width: 100%;
  height: max-content;
  font-family: "Inter";
  font-style: normal;
  font-size: 16px;
  line-height: 19px;
  margin-top: 8px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 0 12px;
  .mandatory{
            position: relative;
            &::after{
                content: '*';
                display: block;
                position: absolute;
                left: 5px;
                top: 14px;
                font-size: 16px;
                color: red;
                transform: scale(1);

            }
        }
  .header {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    padding: 12px 4px;
    border-bottom: 1px solid #e8e8e8;
  }

  .footer {
    .btn-delete {
      color: #ee0a24;
      border: none;
    }
  }
}
</style>
